<script setup lang="ts">
import { useSidebarStore } from '../stores/backup/SidebarDivStore'
import { storeToRefs } from 'pinia'

// 使用 store
const sidebarStore = useSidebarStore()
const { isCollapsed } = storeToRefs(sidebarStore) // 将 state 转换为响应式引用
const { toggleSidebar } = sidebarStore // 获取 action
</script>

<template>
  <aside class="Sidebar">
    <h2></h2>
    <div class="nav-top">
      <div title="纵胜MES(WEB版)" class="com-logo-box">
        <img src="../assets/logo.png" alt="Logo" class="admin-logo" />
        <span class="admin-title">纵胜新材</span>
      </div>
      <div class="admin-info">
        <!-- <span class="admin-name">管理员</span>
        <span class="admin-role">超级管理员</span> -->
      </div>
    </div>
    <!-- 左边栏begin -->
    <div class="sidebar-content">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        :collapse="isCollapsed"
        unique-opened
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><document /></el-icon>
            <span>基础资料</span>
          </template>
          <el-menu-item index="1-1">货品资料</el-menu-item>
          <el-menu-item index="1-2">资料审核</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><tickets /></el-icon>
            <span>基础资料</span>
          </template>
          <el-menu-item index="2-1">货品资料</el-menu-item>
          <el-menu-item index="2-2">大类资料</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><setting /></el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item index="3-1">用户管理</el-menu-item>
          <el-menu-item index="3-2">权限设置</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!-- 左边栏end -->
  </aside>
</template>

<style scoped>
.active-link {
  font-weight: bold;
  color: #ffdd57 !important; /* 激活状态的颜色 */
}
</style>
<style scoped>
.el-aside {
  height: 100vh;
  overflow-y: auto;
  width: 250px;
  background-color: #42b983;
  font-weight: bold;
  color: #ffdd57 !important; /* 激活状态的颜色 */
  position: fixed; /* 固定定位 */
  left: 0; /* 靠左 */
  top: 0; /* 顶部对齐 */
}
</style>
// ... 其他代码 ...

<style scoped>
.sidebar-content {
  position: fixed; /* 固定定位 */
  left: 0; /* 靠左 */
  width: 250px; /* 设置宽度 */
  height: 100vh; /* 使侧边栏占满整个高度 */
  background-color: #42b983; /* 背景色 */
}
</style>

// ... 其他代码 ...
<style scoped>
.el-menu {
  height: 100%;
  background-color: #42b983;
  font-weight: bold;
  width: 250px;
  :deep(.el-sub-menu.is-opened) {
    background-color: #d3d5d5;
  }

  /* 设置子菜单项的背景色 */
  :deep(.el-menu-item) {
    background-color: #e2e7e5;
  }

  /* 设置选中栏目的背景色为黄色 */
  :deep(.el-menu-item.is-active) {
    background-color: #ffdd57 !important; /* 黄色 */
    color: #000000 !important; /* 文字颜色改为黑色 */
  }
}
</style>

<style scoped>
.Sidebar {
  width: 250px;
  background-color: #42b983; /* Vue3 标志性绿色 */
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  height: 100vh; /* 使侧边栏占满整个高度 */
  /*  position: fixed; 固定定位 */
  left: 0; /* 靠左 */
  top: 0; /* 顶部对齐 */
}
.com-logo-box {
  display: flex;
  align-items: center; /* 使内容垂直居中 */
  margin-bottom: 20px; /* 调整底部间距 */
  /* justify-content: left;
  align-items: left;*/
}

.admin-logo {
  width: 50px; /* 设置图片宽度 图片过大，可以调整width的值。例如，设置为80px或60px等 */
  height: auto; /* 保持图片比例 */
  max-width: 100%; /* 防止图片溢出 */
  border-radius: 10px; /* 添加圆角，10px为轻微圆角 */
}
.admin-title {
  font-size: 24px; /* 设置标题字体大小 */
  color: #ffffff; /* 设置标题颜色 */
  margin-left: 10px; /* 调整标题与图片之间的间距 */
  line-height: 1; /* 确保文本垂直居中 */
  vertical-align: middle; /* 使文本在行内垂直居中 */
}
</style>
